❤️ Thank you for your contribution!

Description

Please describe briefly your pull request.

Fixes #295

Root cause

Pagination page items are rendered by semantic-ui-react's Pagination as anchors without href and without an explicit role:

<a class="item" aria-current="false" aria-disabled="false" tabindex="0" value="2" type="pageItem">2</a>

An anchor without href has no native keyboard activation, so semantic-ui-react makes it focusable with tabindex="0" and wires up keyboard activation manually in PaginationItem. However, only "Enter" is handled:

_this.handleKeyDown = function (e) {
  _invoke(_this.props, 'onKeyDown', e, _this.props);
  if (keyboardKey.getCode(e) === keyboardKey.Enter)
    _invoke(_this.props, 'onClick', e, _this.props);
};

Since these items behave as buttons (they trigger an action rather than navigate to a URL), the ARIA APG button pattern applies: they should be activatable with both "Enter" and "Space".

Fix

The root cause lives in semantic-ui-react, but it can be remediated on the react-searchkit side. This PR passes a custom render function to the pageItem shorthand that:

• handles "Space" on keydown by invoking the same onClick that semantic-ui-react injects into the item props, mirroring its existing "Enter" handling
• calls preventDefault() to avoid the default page scroll on "Space"
• adds role="button" so the announced semantics match the behavior for assistive technologies
• ignores disabled items

Mouse and "Enter" activation are unchanged.

Scope

The fix is intentionally scoped to page items, as reported in the issue. The first/prev/next/last arrow items share the same underlying limitation, but customizing them through the shorthand render function drops their default content (icons), so extending the fix to them would require rebuilding those defaults. Happy to address that in a follow-up if there is interest.

Note: using an item shorthand render function triggers a semantic-ui-react v3 deprecation warning in the test output. v3 was never released, this repo pins v2, and there is no alternative API to customize pagination items.

How to verify

1. Run the OpenSearch demo (docker-compose up in src/demos/opensearch/docker, load the demo data, npm start)
2. Perform a search, then use Tab to focus a pagination page number
3. Press "Space": the page changes and the window does not scroll (previously: nothing happened)
4. Press "Enter": still changes the page
5. Mouse clicks: unchanged

Checklist

Ticks in all boxes and 🟢 on all GitHub actions status checks are required to merge:

• I'm aware of the code of conduct.
• I've created logical separate commits and followed the commit message format.
• I've added relevant test cases.
• I've added relevant documentation.
• I've marked translation strings.
• I've identified the copyright holder(s) and updated copyright headers for touched files (>15 lines contributions).
• I've NOT included third-party code (copy/pasted source code or new dependencies).
  • If you have added third-party code (copy/pasted or new dependencies), please reach out to an architect on Discord.

Frontend

• I've followed the CSS/JS and React guidelines.
• I've followed the web accessibility guidelines.
• I've followed the user interface guidelines.

Reminder

By using GitHub, you have already agreed to the GitHub’s Terms of Service including that:

1. You license your contribution under the same terms as the current repository’s license.
2. You agree that you have the right to license your contribution under the current repository’s license.